DeepWiki

02.a - Landing-Page-&-Payment

Relevant source files

This page documents the landing page interface and payment initiation flow. The landing page (app/page.tsx) serves as the primary entry point where users view service information and trigger the $10 payment process via Stripe Checkout. This page covers the UI structure, reusable components, and the server action that creates checkout sessions.

For the post-payment flow, see Success Page & GitHub Connection. For Stripe webhook processing, see Stripe Webhook Handling.

Page Structure and LayoutLink copied!

The landing page is implemented as a Next.js Server Component at app/page.tsx L12-L213

and exports the LandingPage function. The page uses a dark theme with bg-[#0B0C0E] as the primary background color and includes several distinct sections.

The navigation includes the godeep.wiki branding with a BookOpen icon from lucide-react, styled with a blue glow effect:

app/page.tsx L17-L28

Content SectionsLink copied!

The page is organized into the following sections:

SectionPurposeKey Elements
HeroMain value proposition and primary CTATitle, badge, payment button
How It WorksThree-step process visualizationGitHub → Devin → Download
What You GetFeature grid showing deliverables6 feature cards with icons
Why DeepWikiBenefit highlights4 benefit items with descriptions
PricingSecondary CTA with pricing details$10 price, Stripe button, guarantee text
FooterLegal links and copyrightTerms, Privacy links

Component Hierarchy Diagram

Sources: app/page.tsx L12-L213

The landing page uses several custom UI components to create visual effects and guide user attention.

The FadeIn component provides staggered fade-in animations throughout the page. It accepts a delay prop to control animation timing:

Each "How It Works" step uses 100ms increments: delay={0}, delay={100}, delay={200} app/page.tsx L74-L95

app/page.tsx L15

renders the BackgroundReveal component, which provides an animated background effect for the entire page.

The IconGlow component wraps icons in the "How It Works" section, providing a hover glow effect:

components/icon-glow.tsx L10-L19

IconGlow Structure:

  • Outer div: relative group/icon inline-flex
  • Glow layer: absolute -inset-2 bg-blue-500/20 rounded-full opacity-0 group-hover/icon:opacity-100 blur-lg
  • Container: relative flex items-center justify-center w-12 h-12 rounded-2xl bg-slate-900/50 border border-slate-800
  • Hover states: group-hover/icon:border-blue-500/50 and group-hover/icon:bg-blue-500/10

The component uses Tailwind's group hover variant to synchronize the glow effect with the icon container state.

Sources: app/page.tsx L74-L100

components/icon-glow.tsx L1-L20

The SpotlightCard component creates an interactive spotlight effect that follows the user's cursor:

components/spotlight-card.tsx L10-L67

Implementation Details:

The component maintains three pieces of state:

  • divRef: Reference to the card element for bounds calculation
  • position: Object with {x, y} coordinates of cursor relative to card
  • opacity: Controls visibility of spotlight effect (0 when not hovering, 1 when hovering)

Event Handlers:

HandlerPurposeState Change
handleMouseMoveTrack cursor positionUpdates position
handleMouseEnterStart spotlightSets opacity to 1
handleMouseLeaveEnd spotlightSets opacity to 0
handleFocusKeyboard accessibilitySets opacity to 1
handleBlurKeyboard accessibilitySets opacity to 0

Visual Layers:

  1. Base layer: rounded-xl border border-slate-800 bg-slate-900/20
  2. Spotlight layer: Radial gradient at cursor position with rgba(255,255,255,0.06)
  3. Mask layer: Smaller radial gradient with rgba(255,255,255,0.1) and mask image

The spotlight uses radial-gradient(600px circle at ${position.x}px ${position.y}px, ...) for both layers, creating a smooth falloff effect.

Sources: components/spotlight-card.tsx L1-L68

app/page.tsx L116-L124

The BeamButton component wraps the standard shadcn/ui Button with animated glow effects:

components/beam-button.tsx L10-L25

Visual Structure:

CSS Classes Applied:

  • Container: relative group inline-flex
  • Glow: absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full opacity-0 group-hover:opacity-100 transition duration-500 blur group-hover:blur-md animate-tilt
  • Button: relative bg-blue-600 hover:bg-blue-500 text-white rounded-full px-8 h-12 text-base font-medium shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)]

The animate-tilt class provides a subtle animation to the glow layer. The button accepts all standard Button props via spreading: {...props}.

Usage in Landing Page:

Two instances are rendered:

  1. Hero section: <BeamButton size="lg" type="submit">Generate DeepWiki — $10</BeamButton> app/page.tsx L63-L65
  2. Pricing section: <BeamButton size="lg" type="submit" className="w-full">Buy with Stripe</BeamButton> app/page.tsx L182-L184

Both are wrapped in <form action={createCheckoutSession}> elements.

Sources: components/beam-button.tsx L1-L26

app/page.tsx L62-L66

app/page.tsx L181-L185

The createCheckoutSession function is a Next.js Server Action that initiates the Stripe Checkout flow:

app/actions.ts L7-L33

Payment Flow Sequence

Function Parameters:

The server action takes no parameters. It is marked with "use server" directive app/actions.ts L1

Session Configuration:

line_items: [  {    price_data: {      currency: "usd",      product_data: {        name: "DeepWiki Analysis",        description: "Full architectural documentation for your GitHub repository."      },      unit_amount: 1000  // $10.00 in cents    },    quantity: 1  }]

URL Configuration:

URL TypeValuePurpose
success_url${origin}/success?session_id={CHECKOUT_SESSION_ID}Redirect after successful payment
cancel_url${origin}/?canceled=trueRedirect if user cancels

The {CHECKOUT_SESSION_ID} placeholder is replaced by Stripe with the actual session ID during redirect.

Origin Detection:

The action retrieves the origin from request headers to construct absolute URLs:

const headersList = await headers()const origin = headersList.get("origin") || "http://localhost:3000"

This ensures the URLs work in both development and production environments.

Redirect Behavior:

After creating the session, the action calls redirect(session.url) app/actions.ts L31

which triggers a Next.js redirect to the Stripe Checkout page. This redirect happens server-side and replaces the current page navigation.

Sources: app/actions.ts L1-L34

app/page.tsx L62-L66

app/page.tsx L181-L185

The createCheckoutSession action depends on the Stripe client instance imported from @/lib/stripe:

app/actions.ts L4

This import provides a configured Stripe instance initialized with the STRIPE_SECRET_KEY environment variable. The Stripe library version and configuration are determined by the @/lib/stripe module (not shown in provided files, but referenced by the import).

Required Environment Variables:

  • STRIPE_SECRET_KEY: Server-side API key for Stripe operations

For webhook handling after payment completion, see Stripe Webhook Handling.

Sources: app/actions.ts L4

Content and MetadataLink copied!

Page MetadataLink copied!

The landing page inherits metadata from the root layout app/layout.tsx L11-L56

:

SEO Metadata:

  • Title: "Your Private Code Wiki | godeep.wiki"
  • Description: "Understand any repo instantly. Generate a DeepWiki from any private GitHub repo..."
  • Keywords: code documentation, github analysis, architecture diagrams, codebase understanding, developer tools, llm context, mermaid charts

Open Graph Configuration:

Twitter Card:

  • Card type: summary_large_image
  • Creator: @godeepwiki

The hero section includes:

  1. Badge: "Think Deep Research for GitHub" with pulsing blue dot indicator app/page.tsx L35-L38
  2. Title: "Your Private Code Wiki" with gradient text effect app/page.tsx L42-L44
  3. Description: Links to https://deepwiki.com/ with orange hover effect app/page.tsx L47-L58
  4. CTA: Form with BeamButton "Generate DeepWiki — $10" app/page.tsx L62-L66

The "What You Get" section displays 6 feature cards app/page.tsx L108-L125

:

IconLabel
MapArchitecture Diagram
NetworkMermaid Maps
LayersModule Breakdown
NetworkDependencies
FileTextDocs Folder (MD)
BrainLLM Context

The "Why DeepWiki" section highlights 4 key benefits app/page.tsx L131-L168

:

  1. Faster onboarding: "Understand new codebases in minutes, not days."
  2. LLM-ready: "Perfect context for Claude, GPT-4, or other AI coding assistants."
  3. Deeper understanding: "See the hidden connections and architecture clearly."
  4. Saves hours: "Skip the manual reading and diagramming."

Sources: app/page.tsx L32-L169

app/layout.tsx L11-L56

The landing page includes several external links:

DeepWiki Reference:

Devin AI Reference:

These links open in new tabs via target="_blank" and include rel="noopener noreferrer" for security.

Sources: app/page.tsx L49-L55

app/page.tsx L85-L92

The landing page inherits third-party integrations from the root layout:

Vercel Analytics: app/layout.tsx L69

Cloudflare Web Analytics: app/layout.tsx L70-L77

The Cloudflare beacon token defaults to "ab3529b8b0844e25bb614474e5a56035" if NEXT_PUBLIC_CF_BEACON_TOKEN is not set app/layout.tsx L63

Sources: app/layout.tsx L63-L78

The landing page demonstrates Next.js Server Actions pattern with HTML forms:

<form action={createCheckoutSession}>  <BeamButton size="lg" type="submit">    Generate DeepWiki — $10  </BeamButton></form>

Key Characteristics:

  1. No onClick handlers: The form's action prop directly references the server action
  2. Progressive enhancement: Works without JavaScript (though UI components require client-side JS)
  3. Type safety: TypeScript ensures createCheckoutSession matches expected signature
  4. Automatic serialization: Next.js handles the request/response cycle
  5. Server-side execution: Payment logic runs server-side, protecting API keys

This pattern eliminates the need for API route handlers or client-side fetch calls for form submission.

Payment Flow Summary:

Sources: app/page.tsx L62-L66

app/actions.ts L7-L33

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

02.a - Landing-Page-&-Payment | DeepWiki | godeep.wiki